﻿
@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
@section css {
    <style>
        .mui-bar ~ .mui-content .mui-scroll-wrapper {
            height: auto;
        }

        .mui-card .mui-control-content {
            padding: 10px;
        }

        .mui-bar ~ .mui-content .mui-scroll-wrapper {
            top: 14px;
            height: auto;
        }

        .mui-control-content {
            height: 150px;
        }

        .imgicon {
            width: 3.2rem
        }

        .chart {
            height: 200px;
            margin: 0px;
            padding: 0px;
        }

        h5 {
            margin-top: 30px;
            font-weight: bold;
        }

            h5:first-child {
                margin-top: 15px;
            }

        .chart_title {
            font-weight: bold;
            margin: 5px;
            padding: 5px;
            border-bottom: 1px #CCCCCC solid;
        }
    </style>
}
<div ng-cloak ng-controller="FacAndEquController" ng-init="SearchModel={};
     PlaceId='@(Request.QueryString["PlaceId"].IsEmpty() ? "" : Request.QueryString["PlaceId"])';
                RoomId='@(Request.QueryString["RoomId"].IsEmpty() ? "" : Request.QueryString["RoomId"])';
                 PlaceName='@(Request.QueryString["PlaceName"].IsEmpty() ? "" : Request.QueryString["PlaceName"])';
            SearchModel={}; SearchModel.RoomId=RoomId; InitPlaceEqu();GetDeviceTypeChart(RoomId);
     ">
    <header class="mui-bar mui-bar-nav">
        <a href="MFacAndEquPlace" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" style="color:white;">{{PlaceName}}设施设备</h1>
    </header>
    <div class="mui-content">
        <div style="padding: 10px 10px;">
            <div id="segmentedControl" class="mui-segmented-control">
                <a class="mui-control-item mui-active" href="#item1">设备统计</a>
                <a class="mui-control-item" href="#item2">设备列表</a>
            </div>
        </div>
        <div>
            <div id="item1" class="mui-control-content mui-active" style="height:680px;">
                <div class="mui-scroll-wrapper">
                    <div class="mui-card">
                        <p class="chart_title">设备类型分布</p>
                        <div id="devicechart" class="chart">
                        </div>
                    </div>
                </div>
            </div>
            <div id="item2" class="mui-control-content" style="height:680px;">
                <div id="pullrefresh" class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="checklist">
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-striped mui-table-view-condensed">
                            <li class="mui-table-view-cell" ng-show="DataList.length==0" style="height:150px;text-align:center;">暂无数据</li>
                            <li class="mui-table-view-cell" ng-repeat="x in DataList" id="{{x.Id}}">
                                <a class="mui-navigate-right" href="MFacAndEquMaintance?DeviceId={{x.Id}}&RoomId={{RoomId}}&PlaceId={{PlaceId}}&PlaceName={{PlaceName}}">
                                    <span class="mui-badge mui-badge-blue">维保</span>
                                    <div class="mui-table mui-slider-handle">
                                        <div class="mui-table-cell mui-col-xs-10">
                                            <h4 class="mui-ellipsis">{{$index+1}}.{{x.DeviceName}}</h4>
                                            <p class="mui-h6 mui-ellipsis"><b>责任部门：</b>{{x.DepartmentName}}</p>
                                            <p class="mui-h6 mui-ellipsis"><b>管理频次：</b>{{x.ManageInterval}}</p>

                                            <p class="mui-h6 mui-ellipsis"><b>维保单位(部门)：</b>{{x.CompanyName}}</p>
                                            <p class="mui-h6 mui-ellipsis"><b>维保频次：</b>{{x.MaintenanceInterval}}</p>
                                            <p class="mui-h6 mui-ellipsis"><b>状态：</b>{{x.Status|GetStatus}}</p>
                                            <p ng-show="x.LastMaintance!=null" class="mui-h6 mui-ellipsis"><b>上次维保：</b>{{x.LastMaintance.MaintainceDate|JSONDate:'yyyy-MM-dd'}}</p>
                                            <p ng-show="x.LastMaintance!=null" class="mui-h6 mui-ellipsis"><b>下次维保：</b>{{x.LastMaintance.NextDate|JSONDate:'yyyy-MM-dd'}}</p>

                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-bottom:50px;">
        </div>
    </div>
</div>


@section js{
    <script src="~/Assets/js/base/echart.min.js"></script>
    <script src="~/Assets/js/mui.pullToRefresh.js"></script>
    <script src="~/Assets/js/mui.pullToRefresh.material.js"></script>
    <script src="~/Assets/js/pg/FacAndEqu.js?v=@DateTime.Now.ToString("yyyyMMddHH")"></script>
    <script>

    </script>
}
